<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <title>沙漏页面</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/theme.css">
    <link rel="stylesheet"                 href="../lib/font-awesome/css/font-awesome.css">
    <script                                src="../lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
        .errorAlert{
        	color: #f00;
            font-weight: bold;
        }
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
  <!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
  <!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--> 
  <body class=""> 
  <!--<![endif]-->
    <!-- 这里放置的是上边的标题栏 -->
    <div class="navbar">
        <div th:replace="part/navbar"></div>
    </div>

    <!-- 这里放置的是左边的导航栏 -->
    <div class="sidebar-nav">
        <div th:replace="part/sidebar"></div>
    </div>
    
    <div class="content">
        
        <!-- 标题在此 -->
        <div class="header">
            <h1 class="page-title">分页查询成名列表表格</h1>
        </div>
        
        <!-- 页面路径在此 -->
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a> <span class="divider">/</span></li>
            <li class="active">Sandglass</li>
        </ul>

        <div class="container-fluid">
        	<!-- 这个div内部就是页面主要内容 -->
            <div class="row-fluid">
					<div class="tab-pane active in" id="profile">
			
					<table>
						<tr>
							<td width=50%>
								<table border="1" class="table">
									<caption>Table1<span id="span1"></span></caption>
									<thead>
										<tr>
											<td width="120px">id</td>
											<td width="120px">Name</td>
											<td width="120px">Age</td>
										</tr>
									</thead>
									<tbody id="table1">
									</tbody>
								</table>
							</td>
							<td width=50%>
								<table border="1" class="table">
									<caption>Table2<span id="span2"></span></caption>
									<thead>
										<tr>
											<td width="120px">id</td>
											<td width="120px">Name</td>
											<td width="120px">Age</td>
										</tr>
									</thead>
									<tbody id="table2">
									</tbody>
								</table>
							</td>
						</tr>
					</table>
				

                    <!-- 这里放置的是页脚部分 -->
                    <footer>
						<div th:replace="part/footer"></div>
                    </footer>
                    
            </div>
        </div>
    </div>
    
    <!-- 这部分是进行菜单设置的 -->
    <script type="text/javascript">
    	chooseSiderbar("dashboard-menu",4);
    	
    	var sandglass1=new Sandglass();
    	sandglass1.setSpanId("span1");
    	
    	var sandglass2=new Sandglass();
    	sandglass2.setSpanId("span2");
    	
    	fillTable('table1',3,sandglass1);
    	fillTable('table2',5,sandglass2);

		function fillTable(tableId,waitSeconds,sandglass){
			sandglass.start(new Date());
		
    		$.ajax({
    			url:"/mediacool/fetchEmps",
    			data:{waitSeconds:waitSeconds},
    			type:"get",
    			dataType:"json",
    			timeout:50000,
    			error:function(xhr,textStatus,errorThrown){alert('ajax error')},
    			success:function(rsps){
    				sandglass.stop();
    				showDatasInTable(rsps.datas,tableId);
    			},
    		});
    	}
    	
    	function showDatasInTable(datas,tableId){
    		
    		var table=document.getElementById(tableId);

	        // remove remained rows
	        var trs=table.childNodes;
	        for(var i=trs.length-1;i>=0;i--){
	            table.removeChild(trs[i]);
	        }
	
	        // add new rows    
	        for(var i=0,n=datas.length;i<n;i++){
	            var data=datas[i];
	            
	            var td1=document.createElement("td");
	            td1.appendChild(document.createTextNode(data.id));
	            
	            var td2=document.createElement("td");
	            td2.appendChild(document.createTextNode(data.name));
	            
	            var td3=document.createElement("td");
	            td3.appendChild(document.createTextNode(data.age));
	
	            var tr=document.createElement("tr");
	            tr.appendChild(td1);
	            tr.appendChild(td2);
	            tr.appendChild(td3);
	            
	            if(i % 2==0){
	            	tr.style.backgroundColor="#f5f2eb";
	            }
	            
	            table.appendChild(tr);
	        }
    	}
    	
    	function Sandglass(){
	        var spanId;
	        var handler;
	        var startTime;
	
	        this.setSpanId=function(id){
	            spanId=id;
	        }
	
	        this.start=function(time){
	            startTime=time;
	            handler=setInterval(this.showElapsed,500);
	        }
	
	        this.showElapsed=function(){
	            var now=new Date();
	
	            var diff=(now-startTime)/1000;
	            var d=parseInt(diff/86400);
	            var h=parseInt(diff/3600)-24*d;
	            var m=parseInt((diff % 3600) / 60);
	            var s=parseInt(diff % 60);
	            var elapsed=d+"day "+h+"hour "+m+"minute "+s+"second";
	
	            document.getElementById(spanId).innerText=" 已耗时:"+elapsed;
	        }
	
	        this.stop=function(){
	            clearInterval(handler);
	        }
	    }
    </script>
    
  </body>
</html>


